<template>
  <div class='container'>
    <el-card>
    <div class="container-head">
      <div class="tool">
        <el-button icon="el-icon-edit" @click="$router.push('/questions/new')" type="success" size="small">新增试题</el-button>
      </div>
      <div class="searchform">
        <el-row :gutter="15">
      <el-form ref="searchFormref" :model="searchFormData" size="medium" label-width="78px">
         <el-col :span="6">
          <el-form-item label="学科" prop="subjectID">
            <el-select v-model="searchFormData.subjectID" placeholder="请输入学科" clearable
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in $store.state.questionsChoice.objectLists" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录" prop="catalogID">
            <el-select v-model="searchFormData.catalogID" placeholder="请输入二级目录" clearable
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in $store.state.questionsChoice.catalog" :key="index" :label="item.label"
                :value="item.value" ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签" prop="tags">
            <el-select v-model="searchFormData.tags" placeholder="请输入标签" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in $store.state.questionsChoice.tagsList" :key="index" :label="item.label"
                :value="item.value" ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字" prop="keyword">
            <el-input v-model="searchFormData.keyword" placeholder="请输入关键字" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试题类型" prop="questionType">
            <el-select v-model="searchFormData.questionType" placeholder="请选择" clearable
              :style="{width: '100%'}">
              <el-option v-for="(item) in questionType2" :key="item.label" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度" prop="difficulty">
            <el-select v-model="searchFormData.difficulty" placeholder="请选择" clearable
              :style="{width: '100%'}">
              <el-option v-for="(item) in difficulty2" :key="item.label" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向" prop="direction">
            <el-select v-model="searchFormData.direction" placeholder="请选择" clearable
              :style="{width: '100%'}">
              <el-option v-for="(item) in direction" :key="item" :label="item"
                :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" prop="creatorID">
            <el-select v-model="searchFormData.creatorID" placeholder="请选择" clearable
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in $store.state.questionsChoice.userlist" :key="index" :label="item.username"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题目备注" prop="remarks">
            <el-input v-model="searchFormData.remarks" placeholder="请输入" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称" prop="shortName">
            <el-input v-model="searchFormData.shortName" placeholder="请选择" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="城市" prop="province">
            <el-col :span="11"><el-select v-model.trim="searchFormData.province" placeholder="请选择" clearable :style="{width: 300}">
              <el-option v-for="(item, index) in provinces()" :key="index" :label="item"
                :value="item" ></el-option>
            </el-select></el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
              <el-select v-model.trim="searchFormData.city" placeholder="请选择" clearable :style="{width: 100}">
              <el-option v-for="(item, index) in citys(searchFormData.province)" :key="index" :label="item"
                :value="item" ></el-option>
            </el-select></el-col>
          </el-form-item>
        </el-col>
        <el-col :span="4" type="flex" justify="end" align="center">
            <el-button type="primary" size="mini" @click="getChoiceLists">搜索</el-button>
            <el-button size="mini" @click="resetForm">清除</el-button>
        </el-col>
      </el-form>
    </el-row>
      </div>
    </div>
    <div class="container-body">
       <el-tabs v-model="activeTabName" type="card" @tab-click="tabClick">
      <!-- 全部表格 -->
    <el-tab-pane label="全部" name="0">
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="number"
      min-width="150"

      label="试题编号">
    </el-table-column>
    <el-table-column
      prop="subject"
      label="学科">
    </el-table-column>
    <el-table-column
      prop="catalog"
      label="目录">
    </el-table-column>
    <el-table-column
      label="题型">
      <template slot-scope="scoped">
        <span>{{ scoped.row.questionType | mapType }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="question"
      min-width="200"
      label="题干">
      <template v-slot="scoped">
        <span v-html="scoped.row.question"></span>
      </template>
    </el-table-column>
    <el-table-column
      min-width="160"
      prop="addDate"
      label="录入时间">
      <template v-slot="scoped">
        <span>{{ scoped.row.addDate | formatTime }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="difficulty"
      label="难度">
      <template v-slot="scoped">
        <span>{{ scoped.row.difficulty | mapDifficulty }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="creator"
      min-width="130"

      label="录入人">
    </el-table-column>
    <el-table-column
      prop="chkState"
      label="审核状态">
      <template v-slot="scoped">
        <span>{{ scoped.row.chkState | mapChkType }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="chkRemarks"
      label="审核意见">
    </el-table-column>
    <el-table-column
      min-width="130"
      prop="chkUser"
      label="审核人">
    </el-table-column>
    <el-table-column
      prop="publishState"
      label="发布状态">
      <template v-slot="scoped">
        <span>{{ scoped.row.publishState | mapPublishType }}</span>
      </template>
    </el-table-column>
     <el-table-column
      fixed="right"
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button @click="tablePreview(scope.row)" type="text" size="small">预览</el-button>
        <el-button type="text" size="small" @click="showChkDiolog(scope.row)" :disabled="scope.row.chkState !== 1 ? true : false">审核</el-button>
        <el-button type="text" size="small" @click="$router.push({path: '/questions/new', query: {id: scope.row.id}})" :disabled="scope.row.chkState === 1 ? false : true">修改</el-button>
        <template>
        <el-button v-if="scope.row.publishState === 2" type="text" size="small" @click="questionDownOrUp(scope.row, 1)">下架</el-button>
        <el-button v-else type="text" size="small" @click="questionDownOrUp(scope.row, 0)">上架</el-button>
        </template>
        <el-button type="text" size="small" :disabled="scope.row.publishState === 2 ? true : false" @click="questinoDel(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    </el-tab-pane>
    <el-tab-pane label="待审核" name="1">
       <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="number"
      min-width="150"

      label="试题编号">
    </el-table-column>
    <el-table-column
      prop="subject"
      label="学科">
    </el-table-column>
    <el-table-column
      prop="catalog"
      label="目录">
    </el-table-column>
    <el-table-column
      label="题型">
      <template slot-scope="scoped">
        <span>{{ scoped.row.questionType | mapType }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="question"
      min-width="200"
      label="题干">
      <template v-slot="scoped">
        <span v-html="scoped.row.question"></span>
      </template>
    </el-table-column>
    <el-table-column
      min-width="160"
      prop="addDate"
      label="录入时间">
      <template v-slot="scoped">
        <span>{{ scoped.row.addDate | formatTime }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="difficulty"
      label="难度">
      <template v-slot="scoped">
        <span>{{ scoped.row.difficulty | mapDifficulty }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="creator"
      min-width="130"

      label="录入人">
    </el-table-column>
    <el-table-column
      prop="chkState"
      label="审核状态">
      <template v-slot="scoped">
        <span>{{ scoped.row.chkState | mapChkType }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="chkRemarks"
      label="审核意见">
    </el-table-column>
    <el-table-column
      min-width="130"
      prop="chkUser"
      label="审核人">
    </el-table-column>
    <el-table-column
      prop="publishState"
      label="发布状态">
      <template v-slot="scoped">
        <span>{{ scoped.row.publishState | mapPublishType }}</span>
      </template>
    </el-table-column>
     <el-table-column
      fixed="right"
      label="操作"
      width="200">
       <template slot-scope="scope">
        <el-button @click="tablePreview(scope.row)" type="text" size="small">预览</el-button>
        <el-button type="text" size="small" @click="showChkDiolog(scope.row)" :disabled="scope.row.chkState !== 1 ? true : false">审核</el-button>
        <el-button type="text" size="small" :disabled="scope.row.chkState === 1 ? false : true">修改</el-button>
        <template>
        <el-button v-if="scope.row.publishState === 2" type="text" size="small">下架</el-button>
        <el-button v-else type="text" size="small">上架</el-button>
        </template>
        <el-button type="text" size="small" :disabled="scope.row.publishState === 2 ? true : false">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    </el-tab-pane>
    <el-tab-pane label="已审核" name="2">
       <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="number"
      min-width="150"

      label="试题编号">
    </el-table-column>
    <el-table-column
      prop="subject"
      label="学科">
    </el-table-column>
    <el-table-column
      prop="catalog"
      label="目录">
    </el-table-column>
    <el-table-column
      label="题型">
      <template slot-scope="scoped">
        <span>{{ scoped.row.questionType | mapType }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="question"
      min-width="200"
      label="题干">
      <template v-slot="scoped">
        <span v-html="scoped.row.question"></span>
      </template>
    </el-table-column>
    <el-table-column
      min-width="160"
      prop="addDate"
      label="录入时间">
      <template v-slot="scoped">
        <span>{{ scoped.row.addDate | formatTime }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="difficulty"
      label="难度">
      <template v-slot="scoped">
        <span>{{ scoped.row.difficulty | mapDifficulty }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="creator"
      min-width="130"

      label="录入人">
    </el-table-column>
    <el-table-column
      prop="chkState"
      label="审核状态">
      <template v-slot="scoped">
        <span>{{ scoped.row.chkState | mapChkType }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="chkRemarks"
      label="审核意见">
    </el-table-column>
    <el-table-column
      min-width="130"
      prop="chkUser"
      label="审核人">
    </el-table-column>
    <el-table-column
      prop="publishState"
      label="发布状态">
      <template v-slot="scoped">
        <span>{{ scoped.row.publishState | mapPublishType }}</span>
      </template>
    </el-table-column>
     <el-table-column
      fixed="right"
      label="操作"
      width="200">
       <template slot-scope="scope">
        <el-button @click="tablePreview(scope.row)" type="text" size="small">预览</el-button>
        <el-button type="text" size="small" @click="showChkDiolog(scope.row)" :disabled="scope.row.chkState !== 1 ? true : false">审核</el-button>
        <el-button type="text" size="small" :disabled="scope.row.chkState === 1 ? false : true">修改</el-button>
        <template>
        <el-button v-if="scope.row.publishState === 2" type="text" size="small">下架</el-button>
        <el-button v-else type="text" size="small">上架</el-button>
        </template>
        <el-button type="text" size="small" :disabled="scope.row.publishState === 2 ? true : false">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    </el-tab-pane>
    <el-tab-pane label="已拒绝" name="3"><el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="number"
      min-width="150"

      label="试题编号">
    </el-table-column>
    <el-table-column
      prop="subject"
      label="学科">
    </el-table-column>
    <el-table-column
      prop="catalog"
      label="目录">
    </el-table-column>
    <el-table-column
      label="题型">
      <template slot-scope="scoped">
        <span>{{ scoped.row.questionType | mapType }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="question"
      min-width="200"
      label="题干">
      <template v-slot="scoped">
        <span v-html="scoped.row.question"></span>
      </template>
    </el-table-column>
    <el-table-column
      min-width="160"
      prop="addDate"
      label="录入时间">
      <template v-slot="scoped">
        <span>{{ scoped.row.addDate | formatTime }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="difficulty"
      label="难度">
      <template v-slot="scoped">
        <span>{{ scoped.row.difficulty | mapDifficulty }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="creator"
      min-width="130"

      label="录入人">
    </el-table-column>
    <el-table-column
      prop="chkState"
      label="审核状态">
      <template v-slot="scoped">
        <span>{{ scoped.row.chkState | mapChkType }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="chkRemarks"
      label="审核意见">
    </el-table-column>
    <el-table-column
      min-width="130"
      prop="chkUser"
      label="审核人">
    </el-table-column>
    <el-table-column
      prop="publishState"
      label="发布状态">
      <template v-slot="scoped">
        <span>{{ scoped.row.publishState | mapPublishType }}</span>
      </template>
    </el-table-column>
     <el-table-column
      fixed="right"
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button @click="tablePreview(scope.row)" type="text" size="small">预览</el-button>
        <el-button type="text" size="small" @click="showChkDiolog(scope.row)" :disabled="scope.row.chkState !== 1 ? true : false">审核</el-button>
        <el-button type="text" size="small" :disabled="scope.row.chkState === 1 ? false : true">修改</el-button>
        <template>
        <el-button v-if="scope.row.publishState === 2" type="text" size="small">下架</el-button>
        <el-button v-else type="text" size="small">上架</el-button>
        </template>
        <el-button type="text" size="small" :disabled="scope.row.publishState === 2 ? true : false">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </el-tab-pane>
  </el-tabs>
  <!-- 分页 -->
   <el-pagination
      @size-change="sizechange"
      @current-change="pagechange"
      :current-page="page"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next"
      :total="counts">
    </el-pagination>
    </div>
    <!-- 审核弹出框组件 -->
    <QuestionsCheck :visible.sync="chkDialogVisible" :id="chkId" @chkUpdate="getChoiceLists" ></QuestionsCheck>
    <!-- 预览弹出框组件 -->
    <QPreview :cloneQuestionInfo="cloneQuestionInfo"
        :isOpenPanel="showpanel"
        :checkedChoice="checkedChoice"
        :checkedChoiceList="checkedChoiceList"
        @closePanel="handleClosePre" />
    </el-card>
  </div>
</template>

<script>
import { questionType, difficulty, chkType, publishType, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
// import * as cons from '@/api/hmmm/constants'
import { parseTime } from '@/filters'
import QuestionsCheck from '../components/questions-check.vue'
import { choicePublish, remove, detail } from '@/api/hmmm/questions'
import QPreview from '../components/questions-preview.vue'
export default {
  data () {
    return {
      searchFormData: {
        subjectID: undefined,
        catalogID: undefined,
        tags: undefined,
        keyword: undefined,
        questionType: undefined,
        difficulty: undefined,
        direction: undefined,
        creatorID: undefined,
        remarks: undefined,
        shortName: undefined,
        province: undefined,
        city: undefined
      },
      page: 1,
      pagesize: 5,
      counts: 0,
      questionType2: questionType,
      difficulty2: difficulty,
      direction: direction,
      tableData: [],
      // tabs部分
      activeTabName: 0,
      // 渲染列表
      choiceLists: [],
      chkDialogVisible: false,
      chkId: '',
      // 预览组件变量
      cloneQuestionInfo: undefined,
      // 显示预览组件
      showpanel: false

    }
  },
  methods: {
    resetForm () {
      this.$refs.searchFormref.resetFields()
    },
    // 切换分页
    async tabClick (tab) {
      this.page = 1
      try {
        const params = { page: this.page, pagesize: this.pagesize, ...this.searchFormData }
        if (parseInt(tab.name) === 0) {
          params.chkState = undefined
        } else {
          params.chkState = tab.name
        }
        const res = await this.$store.dispatch('getChoiceLists', params)
        console.log('获取的精选题库列表res', res)
        this.tableData = res.data.items
        this.counts = res.data.counts
      } catch (error) {
        console.log('error', error)
      }
    },
    async getChoiceLists () {
      try {
        const res = await this.$store.dispatch('getChoiceLists', { page: this.page, pagesize: this.pagesize, ...this.searchFormData })
        console.log('获取的精选题库列表res', res)
        this.tableData = res.data.items
        this.counts = res.data.counts
      } catch (error) {
        console.log('error', error)
      }
    },
    // 点击预览
    async tablePreview (row) {
      try {
        const res = await detail(row)
        this.cloneQuestionInfo = res.data
      } catch (error) {
        console.log(error)
      }
      this.cloneQuestionInfo.questionType = row.questionType
      this.cloneQuestionInfo.difficulty = row.difficulty
      this.cloneQuestionInfo.options.forEach((item) => {
        if (item.isRight === 1) {
          if (row.questionType === '多选') {
            this.checkedChoiceList.push(item.title)
          } else if (row.questionType === '单选') {
            this.checkedChoice = item.title
          }
        }
      })
      this.showpanel = true
    },
    provinces () {
      return provinces()
    },
    citys () {
      return citys(this.searchFormData.province)
    },
    sizechange (val) {
      this.pagesize = val
      this.getChoiceLists()
    },
    pagechange (val) {
      this.page = val
      this.getChoiceLists()
    },
    // 点击审核
    showChkDiolog (row) {
      this.chkId = row.id
      this.chkDialogVisible = true
    },
    // 上下架
    questionDownOrUp (row, flag) {
      const sendData = { id: row.id }
      // 下架
      if (flag === 1) {
        sendData.publishState = 3
        this.$confirm('您确认下架这道题目吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await choicePublish(sendData)
          if (!res.data.success) return this.$message.error('上下架失败')
          this.$message.success('操作成功')
          this.getChoiceLists()
        }).catch(() => {
        })// 上架
      } else {
        sendData.publishState = 2
        this.$confirm('您确认上架这道题目吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await choicePublish(sendData)
          if (!res.data.success) return this.$message.error('上下架失败')
          this.$message.success('操作成功')
          this.getChoiceLists()
        }).catch(() => {
        })
      }
    },
    // 删除
    questinoDel (row) {
      this.$confirm('您确认永久删除这道题目吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove(row)
        if (!res.data.success) return this.$message.error('删除失败')
        this.$message.success('删除成功')
        this.getChoiceLists()
      }).catch(() => {
      })
    },
    // 关闭预览对话框
    handleClosePre () {
      this.showpanel = false
    }

  },
  created () {
    this.getChoiceLists()
    this.$store.dispatch('getObjectsLists')
    this.$store.dispatch('getCatalog')
    this.$store.dispatch('getTagsList')
    this.$store.dispatch('getUserList')
  },
  computed: {
  },
  filters: {
    formatTime (val) {
      return parseTime(val)
    },
    mapType (val) {
      // eslint-disable-next-line eqeqeq
      const temp = questionType.find(v => v.value == val)
      return temp ? temp.label : '未知题型'
    },
    mapPublishType (val) {
      // eslint-disable-next-line eqeqeq
      const temp = publishType.find(v => v.value == val)
      return temp ? temp.label : '未知状态'
    },
    mapChkType (val) {
      // eslint-disable-next-line eqeqeq
      const temp = chkType.find(v => v.value == val)
      return temp ? temp.label : '未知状态'
    },
    mapDifficulty (val) {
      // eslint-disable-next-line eqeqeq
      const temp = difficulty.find(v => v.value == val)
      return temp ? temp.label : '未知难度'
    }
  },
  components: {
    QuestionsCheck,
    QPreview
  }
}
</script>

<style scoped lang='less'>
.container {
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
}
.tool {
  display: flex;
  justify-content: end;
  margin-bottom: 10px;
}
</style>
